<template>
    <view class="content">
        <view class="title">
            <view>基本资料</view>
        </view>
        <view class="box">
            <view class="item">
                <view class="item-l">姓名</view>
                <view class="item-r">{{data.name}}</view>
            </view>
            <view class="item">
                <view class="item-l">性别</view>
                <view class="item-r">{{ data.gender == 1 ? '男' : '女' }}</view>
            </view>
            <view class="item">
                <view class="item-l">年龄</view>
                <view class="item-r">{{data.age}}岁</view>
            </view>
            <view class="item">
                <view class="item-l">性格</view>
                <view class="item-r">{{data.character}}</view>
            </view>
            <view class="item">
                <view class="item-l">爱好</view>
                <view class="item-r">{{data.hobby}}</view>
            </view>
            <view class="item">
                <view class="item-l">疾病史</view>
                <view class="item-r">{{data.disease}}</view>
            </view>
        </view>
        
        <view class="title">
            <view>过敏源</view>
        </view>
        <view class="box">
            <view class="item-r">{{data.allergy}}</view>
        </view>
        
        <view class="title">
            <view>服务记录</view>
            <view class="more" @click="$gTo(`/pages/order/study-record?id=${id}`)">查看更多</view>
        </view>
        <view class="list" v-for="(item, index) in data.record" :key="index"
             @click="$gTo(`/mine/pages/child-info/child-record-details?id=${item.id}`)">
            <image :src="item.image" class="img"></image>
            <view>
                <view class="name">{{item.name}}</view>
                <view class="btns">
                    <!-- 只有周期服务有 用户对陪伴师的评价 type 1单次 2周期 -->
                    <view class="btn3" v-if="item.evaluate_id == 0 && item.type == 2" @click.stop="openEval(item)">立即评价</view>
                    <view class="btn">查看详情</view>
                </view>
            </view>
        </view>
        
        <view style="text-align: center;padding: 50upx 0;color: #999;font-size: 24rpx;" v-if="data.record.length == 0">暂无相关信息</view>
        
        
        <!-- 评价 -->
        <u-popup mode="bottom" v-model="Cshow" :closeable="true" border-radius="20">
            <view class="popup">
                <view class="popup-top">
                    <view class="pop-tit">陪伴师评价</view>
                    <view class="u-p-b-20">“{{value}}星 评分”</view>
                    <u-rate :count="5" v-model="value" active-color="#fcc937" inactive-color="#f1f1f1" 
                        :disabled="false" size="40"></u-rate>
                </view>
                <view class="pop-tip">请选择原因，我们会督促陪伴师</view>
                <view class="pop-text">
                    <view class="pop-item" v-for="(item, index) in evalist.evaluate" :key="index" 
                        :class="{popActive : item.checked}" @click="chooseEvaluate(item)">{{item.name}}</view>
                </view>
                <template v-if="isShowInput">
                    <textarea v-model="content" placeholder="您的反馈会督促我们做得更好"  :auto-height="true" class="t-inp"></textarea>
                </template>
                <view class="pop-btn" @click="doRate">立即评价</view>
            </view>
        </u-popup>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                id: '',
                data: {},
                
                value: 5,
                content: '',
                Cshow: false,
                isShowInput: false,//输入框 延迟显示
                evalist: {},
                item: {},
            };
        },
        onLoad(option) {
            this.id = option.id
            this.getData()
            this.getOption()
        },
        methods: {
            openEval(item) {
                this.item = item
                this.Cshow = true
                setTimeout(() => {
                    this.isShowInput = true;
                });
            },
            
            // 立即评价
            doRate() {
                var eid = []
                this.evalist.evaluate.forEach(cur => {
                    if (cur.checked) {
                        eid.push(cur.id)
                    }
                })
                // if (eid.length <= 0) {
                //     this.$toast('请选择评价原因')
                //     return
                // }
                if (!this.content) {
                    this.$toast('请输入评价内容')
                    return
                }
                this.$ajax('insert_evaluate', {
                	user_token: this.$getSync('userToken'),
                	id: this.item.order_id, //订单id
                    star: this.value,//星
                    reason_ids: eid.join(',') || '',//评价原因id
                    describes: this.content,//评价内容
                    record_id: this.item.id, //记录id
                }).then(ret => {
                	if (ret.success == 1000) {
                        this.$toast('评价提交成功')
                		this.Cshow = false
                        this.isShowInput = false
                        this.content = ''
                        this.evalist.evaluate.forEach(cur => {
                            cur.checked = false
                        })
                        
                        this.getData()
                	} else {
                		this.$toast(ret.msg);
                	}
                });
            },
            
            chooseEvaluate(item) {
                item.checked = !item.checked
            },
            
            getOption() {
            	this.$ajax('order_option', {
            		
            	}).then(ret => {
            		if (ret.success == 1000) {
            			this.evalist = ret.detail
                        this.evalist.evaluate.forEach(cur => {
                            this.$set(cur, 'checked', false)
                        })
            		} else {
            			this.$toast(ret.msg);
            		}
            	});
            },
            
            getData() {
            	this.$ajax('child_detail', {
            		user_token: this.$getSync('userToken'),
                    id: this.id,//孩子资料id
            	}).then(ret => {
            		if (ret.success == 1000) {
                        this.data = ret.detail
            		} else {
            			this.$toast(ret.msg);
            		}
            	});
            },
        }
    };
</script>

<style lang="scss">
    
    page{
        background-color: #f5f5f5;
    }
    .content{
        padding: 20rpx;
    }
    .title{
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-bottom: 20rpx;
        font-size: 32rpx;
        font-weight: bold;
    }
    .more{
        font-size: 26rpx;
        font-weight: normal;
    }
    .box{
        padding: 35rpx 30rpx;
        background-color: #fff;
        border-radius: 15rpx;
        margin-bottom: 35rpx;
    }
    .item{
        display: flex;
        justify-content: flex-start;
        align-items: center;
        padding-bottom: 20rpx;
        font-size: 26rpx;
    }
    .item:last-child{
        padding-bottom: 0;
    }
    .item-l{
        width: 100rpx;
    }
    .item-r{
        flex: 1;
        white-space: pre-line;
        word-break: break-all;
        font-weight: bold;
    }
    
    .list{
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 30rpx 35rpx;
        margin-bottom: 20rpx;
        background-color: #fff;
        border-radius: 15rpx;
    }
    .img{
        width: 140rpx;
        height: 140rpx;
        border-radius: 10rpx;
        margin-right: 25rpx;
    }
    .name{
        font-size: 32rpx;
        font-weight: bold;
        width: 480rpx;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        padding-bottom: 30rpx;
    }
    .btns{
        display: flex;
        justify-content: flex-end;
        align-items: center;
    }
    .btn{
        padding: 15rpx 23rpx;
        font-size: 24rpx;
        color: #fff;
        background-color: #f29700;
        border-radius: 10rpx;
    }
    .btn3{
        padding: 12rpx 23rpx;
        font-size: 24rpx;
        color: #000;
        background-color: #fffcf8;
        border: 2rpx solid #f29700;
        border-radius: 10rpx;
        box-sizing: border-box;
        margin-right: 20rpx;
    }
    
    
    .popup{
        padding: 40rpx;
    }
    .popup-top{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding-bottom: 50rpx;
        font-size: 40rpx;
        font-weight: bold;
    }
    .pop-tit{
        font-size: 34rpx;
        padding-bottom: 40rpx;
    }
    .pop-tip{
        font-size: 26rpx;
        color: #ff502e;
        padding-bottom: 15rpx;
    }
    .pop-text{
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        align-items: center;
        padding-bottom: 10rpx;
    }
    .pop-item{
        padding: 12rpx 16rpx;
        margin-right: 18rpx;
        margin-bottom: 18rpx;
        background-color: #f5f5f5;
        border-radius: 8rpx;
        font-size: 24rpx;
        color: #767676;
    }
    .popActive{
        background-color: #fef8e1;
        color: #ff7d00;
    }
    
    .t-inp{
        padding: 20rpx;
        background-color: #f5f5f5;
        border: 2rpx solid #e7e7e7;
        border-radius: 10rpx;
        font-size: 26rpx;
        margin-bottom: 40rpx;
        width: 100%;
        min-height: 220rpx;
    }
    .pop-btn{
        font-size: 30rpx;
        color: #fff;
        text-align: center;
        background-color: #f29700;
        border-radius: 20rpx;
        padding: 20rpx;
    }

</style>
